<template>
  <div class="dt-controls">
    <div class="animation-play">
      <button @click.stop="toggleBack">
        <i class="ri-skip-back-fill"></i>
      </button>
      <button @click.stop="togglePlay">
        <i :class="controls.isPlayed ? 'ri-pause-circle-fill' : 'ri-play-fill'"></i>
      </button>
      <button @click.stop="toggleForward">
        <i class="ri-skip-forward-fill"></i>
      </button>
      <button>
        <i class="ri-time-fill" @click.stop="$refs.datePicker.focus()"></i>
        <el-date-picker
          ref="datePicker"
          v-model="selectedTime"
          :editable="false"
          type="datetime"
          value-format="yyyy-MM-ddTHH:mm:ssZ"
          @change="changeCurrentTime"
        ></el-date-picker>
      </button>
    </div>
    <div class="timeline">
      <el-slider
        v-model="timeData.value"
        :min="timeData.min"
        :max="timeData.max"
        :format-tooltip="formatTime"
        :marks="timeData.marks"
        @input="changeCurrentTimeOfSlider"
      ></el-slider>
    </div>
    <div class="animation-speed">
      <button @click.stop="speedUp">
        <i class="ri-add-line"></i>
      </button>
      <button @click.stop="speedDown">
        <i class="ri-subtract-line"></i>
      </button>
      <el-slider
        v-model="controls.speed"
        @change="changeSpeed"
        :min="1"
        :max="300"
        :marks="speedData.marks"
      ></el-slider>
    </div>
  </div>
</template>
<script src="./index.js"></script>

<style lang="scss" src="./index.scss" scoped></style>
